<!-- @format -->

<!--
 * @Author: zuo 2826618614@qq.com
 * @Date: 2023-08-26 16:19:05
 * @LastEditors: zuo 2826618614@qq.com
 * @LastEditTime: 2023-08-27 00:34:19
 * @FilePath: \lu-ui-test\lu-ui\components\i-button\i-button.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<button @tap="cilck" @getphonenumber="getphonenumber" @getuserinfo="getuserinfo" @error="error" @opensetting="opensetting" @launchapp="launchapp" :class="bemClass" class="l-button reset-button">
		<slot></slot>
	</button>
</template>

<script>
	import props from "./props.js";
	export default {
		name: "l-button",
		mixins: [props],
		data() {
			return {};
		},
		methods: {
			cilck() {
				!this.disabled && this.$emit("click");
			},
			// uni开放能力函数回调
			getphonenumber(res) {
				this.$emit("getphonenumber", res);
			},
			getuserinfo(res) {
				this.$emit("getuserinfo", res);
			},
			error(res) {
				this.$emit("error", res);
			},
			opensetting(res) {
				this.$emit("opensetting", res);
			},
			launchapp(res) {
				this.$emit("launchapp", res);
			},
		},
		computed: {
			bemClass() {
				return [`l-button-${this.type}`, `l-button-${this.size}`, this.disabled && `l-button-disabled-true`, this.plain && `l-button-plain-${this.type}`];
			},
			// 文本大小
			textSize() {
				const fontSize = {
					large: 16,
					normal: 14,
					small: 12,
					mini: 10,
				};
				return uni.$lu.addUnit(fontSize[this.size]);
			},
		},
	};
</script>

<style lang="scss" scoped>
	$l-button-u-button-height: 30px !default;

	$u-button-disabled-opacity: 0.5 !default;

	$l-button-reset-border: none !default;
	$l-border-radius-defalut: 0 !default;
	$l-border-radius-round: 10px !default;
	$l-border-radius-circle: 100px !default;

	$l-button-width-large: 100% !default;
	$l-button-height-large: 38px !default;
	$l-button-padding-large: 0 15px !default;

	$l-button-padding-normal: 0 12px !default;
	$l-button-width-normal: 100% !default;
	$l-button-height-normal: 32px !default;
	$l-button-font-size-normal: 12px !default;

	$l-button-width-small: 100% !default;
	$l-button-height-small: 26px !default;
	$l-button-padding-small: 0px 8px !default;
	$l-button-font-size-small: 12px !default;

	$l-button-padding-mini: 0px 18px !default;
	$l-button-height-mini: 22px !default;
	$l-button-font-size-mini: 8px !default;

	.l-button {
		height: $l-button-u-button-height;
		position: relative;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		transition: all 0.3s;

		@each $header, $color in (default: $l-default, primary: $l-primary, error: $l-error, info: $l-info, warning: $l-warning, success: $l-success) {
			&-#{$header} {
				background-color: $color;
				color: $l-white;

				@if $header== "default" {
					color: black;
				}
			}
		}

		&-large {
			width: $l-button-width-large;
			height: $l-button-height-large;
			padding: $l-button-padding-large;
			font-size: $l-button-font-size-normal;
		}

		&-normal {
			width: $l-button-width-normal;
			padding: $l-button-padding-normal;
			font-size: $l-button-font-size-normal;
		}

		&-small {
			width: $l-button-width-small;
			height: $l-button-height-small;
			padding: $l-button-padding-small;
			font-size: $l-button-font-size-small;
		}

		&-mini {
			height: $l-button-height-mini;
			padding: $l-button-padding-mini;
			font-size: $l-button-font-size-mini;
		}

		&-defalut {
			border-radius: $l-border-radius-defalut;
		}

		&-round {
			border-radius: $l-border-radius-round;
		}

		&-circle {
			border-radius: $l-border-radius-circle;
		}

		&-disabled-true {
			opacity: $u-button-disabled-opacity;
		}

		&-plain-primary {
			background-color: $l-white;
			color: $l-primary;
			border: 1px solid $l-primary;
		}

		&-plain-error {
			background-color: $l-white;
			color: $l-error;
			border: 1px solid $l-error;
		}

		&-plain-info {
			background-color: $l-white;
			color: $l-info;
			border: 1px solid $l-info;
		}

		&-plain-warning {
			background-color: $l-white;
			color: $l-warning;
			border: 1px solid $l-warning;
		}

		&-plain-success {
			background-color: $l-white;
			color: $l-success;
			border: 1px solid $l-success;
		}

		&-plain-default {
			background-color: $l-white;
			color: $l-content-color;
			border: 1px solid $l-content-color;
		}
	}

	.l-button:active {
		opacity: 0.5;
		transition: all 0.1s;
	}
</style>
